<template>
  <div v-loading="loading">
    <div class="flex items-center justify-between cursor-pointer">
      <div @click="handleGo">
        <el-icon>
          <ArrowLeftBold />
        </el-icon>
        <span class="pl-5">{{ $t("卡片详情") }}</span>
      </div>
      <div>
        <el-button
          v-for="(item, index) of setCardBtnList"
          :key="index"
          type="danger"
          @click="item.click()"
          style="border-radius: 15px"
          :style="{ background: item.color, borderColor: item.color }"
          >{{ item.name }}</el-button
        >
      </div>
    </div>
    <el-card class="mt-8">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="flex items-center justify-center">
            <img
              v-show="state.detailInfo.brand === 'VISA'"
              src="@/assets/images/VISA.jpg"
              alt=""
              style="height: 200px; border-radius: 10px"
            />
            <img
              v-show="
                capitalizeFirstLetter(state.detailInfo.brand) === 'Master'
              "
              src="@/assets/images/Master.jpg"
              alt=""
              style="height: 200px; border-radius: 10px"
            />
          </div>
          <div
            v-show="!state.detailInfo.brand"
            style="
              width: 70%;
              height: 200px;
              margin: 0 auto;
              border-radius: 10px;
              background: rgb(244 244 244);
            "
          ></div>
        </el-col>
        <el-col :span="12" class="pt-5">
          <div class="detailRow">
            <span class="rowName">{{ $t("卡片别名") }}</span>
            <span class="rowValue">
              {{ state.detailInfo.nick_name || "--" }}</span
            >
            <el-tag
              class="ml-5"
              :type="
                getCardStatusName(state.detailInfo.card_status)
                  ? getCardStatusName(state.detailInfo.card_status)?.type
                  : 'info'
              "
            >
              {{
                getCardStatusName(state.detailInfo.card_status)
                  ? getCardStatusName(state.detailInfo.card_status)?.name
                  : state.detailInfo.card_status
              }}
            </el-tag>
          </div>
          <div class="detailRow">
            <span class="rowName">{{ $t("卡片额度") }}</span>
            <p class="rowValue">
              {{ numberToCurrencyNo(state.totalAmount) }}
              {{ state.detailInfo.currency }}
            </p>
          </div>
          <div class="detailRow">
            <span class="rowName">{{ $t("卡片号码") }}</span>
            <span class="rowValue"> {{ state.cardInfo.card_number }}</span>
          </div>
          <div class="detailRow">
            <span class="rowName">{{ $t("有效期") }}</span>
            <span class="rowValue"> {{ state.cardInfo.card_time }}</span>
          </div>
          <div class="detailRow">
            <span class="rowName">{{ $t("安全码") }}</span>
            <span class="rowValue"> {{ state.cardInfo.cvv }}</span>
          </div>
          <p class="text-[#F59A23]">{{ state.detailInfo.review_msg }}</p>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="mt-8">
      <h3 class="text-large">{{ $t("刷卡限额") }}</h3>
      <el-divider />
      <el-row :gutter="20">
        <el-col :span="12">
          <h5 class="text-sm">{{ $t("交易限额") }}</h5>
          <p class="mt-2 mb-3">
            {{ numberToCurrencyNo(state.totalAmount) }}
            {{ state.detailInfo.currency }}
          </p>
        </el-col>
        <el-col :span="12">
          <div v-for="item of state.limits" class="mt-2 text-sm">
            <h5>{{ item.interval_name }}</h5>
            <p class="mb-2">
              {{ numberToCurrencyNo(item.amount) }}
              {{ state.detailInfo.currency }}
              {{ $t("限额") }}
            </p>
            <!-- 单笔不需要 -->
            <el-progress
              v-if="item.interval !== 'PER_TRANSACTION'"
              :percentage="percentage(item)"
              status="exception"
              :show-text="false"
              :max="item.amount"
            />
            <p class="mt-2" v-if="item.interval !== 'PER_TRANSACTION'">
              {{ $t("剩余")
              }}{{
                numberToCurrencyNo(Number(item.amount) - Number(item.remaining))
              }}
              {{ state.detailInfo.currency }}
            </p>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="mt-8">
      <h3 class="text-large">{{ $t("卡片概况") }}</h3>
      <el-divider />
      <el-form label-position="top" label-width="auto" :model="formLabelAlign">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('卡片类型')">
              <span>{{ state.detailInfo.category_name }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('姓氏')">
              <span>{{ state.detailInfo.primary_contact?.last_name }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('名字')">
              <span> {{ state.detailInfo.primary_contact?.first_name }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('邮箱')">
              <span>{{ state.detailInfo.primary_contact?.email }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('手机号')">
              <span
                >{{ state.detailInfo.primary_contact?.area_code }} -
                {{ state.detailInfo.primary_contact?.mobile_number }}</span
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-drawer v-model="state.limitDrawer" :title="$t('设置限额')" size="40%">
      <el-card>
        <h4 class="text-large">{{ $t("卡片总金额") }}</h4>
        <p class="mt-2 mb-3">
          {{ numberToCurrencyNo(state.totalAmount) }}
          {{ state.detailInfo.currency }}
        </p>
        <el-row
          :gutter="20"
          class="mb-2"
          v-for="(condition, index) in state.searchConditions"
          :key="index"
        >
          <el-col :span="10">
            <el-input
              ref="inputRef"
              :placeholder="$t('请设置限额')"
              v-model="condition.amount"
              type="number"
              @change="(val) => onChange(val, condition)"
            ></el-input>
            <span class="text-[#e54c5f] text-xs">{{ condition.tips }}</span>
          </el-col>
          <el-col :span="10">
            <el-select
              :placeholder="$t('请选择')"
              v-model="condition.interval"
              @change="(val) => onChange(val, condition)"
            >
              <el-option
                v-for="item in state.cardLimits"
                :key="item.value"
                :label="item.name"
                :value="item.value"
                :disabled="selectItems.includes(item.value)"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-icon @click="removeLimit(index)"><Delete /></el-icon>
          </el-col>
        </el-row>
        <!-- 条件只能四条 -->
        <el-button
          link
          type="danger"
          @click="addLimit"
          v-if="state.searchConditions.length < 4"
          >{{ $t("增加一个限额") }}</el-button
        >
      </el-card>
      <div class="flex justify-center mt-6 align-center">
        <el-button type="danger" size="large" class="w-20" @click="saveLimit">{{
          $t("保存")
        }}</el-button>
      </div>
    </el-drawer>
    <Recharge
      :isShowRecharge="isShowRecharge"
      :cardId="state.detailInfo.card_id"
      :isHavePassword="isHavePassword"
      :assetType="state.detailInfo.asset_type"
      @close="
        () => {
          isShowRecharge = false;
        }
      "
    />
    <Withdraw
      :isShowWithdraw="isShowWithdraw"
      :cardId="state.detailInfo.card_id"
      :assetType="state.detailInfo.asset_type"
      :isHavePassword="isHavePassword"
      @close="
        () => {
          isShowWithdraw = false;
        }
      "
    />
    <Record
      :isShowRecord="isShowRecord"
      :cardId="state.detailInfo.card_id"
      :assetType="state.detailInfo.asset_type"
      @close="
        () => {
          isShowRecord = false;
        }
      "
    />
  </div>
</template>
<script setup>
import { ref, reactive, computed, nextTick, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import { numberToCurrencyNo, generateMaskedString } from "@/utils/utils";
import Recharge from "./recharge.vue";
import Withdraw from "./withdraw.vue";
import Record from "./record.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { GetNewMerchantInfo } from "@/api/merchant/index";
import {
  GetCardsDetail,
  GetCardsLimits,
  setCard,
  getCardSensitive,
  setCardLimits,
  GetCardsConfig,
} from "@/api/card";

const router = useRouter();
const route = useRoute();

const formLabelAlign = reactive({
  name: "",
});

const loading = ref(false);
const inputRef = ref(null);

const percentage = (item) => {
  if (item.remaining) {
    return ((item.amount - item.remaining) / item.amount) * 100;
  } else {
    return 0;
  }
};

const state = reactive({
  limitDrawer: false,
  totalAmount: "",
  cardLimits: [],
  cardInfo: {},
  detailInfo: {},
  searchConditions: [
    {
      amount: "",
      interval: "",
      tips: "",
    },
  ],
  limits: {},
  isShowCard: true,
  dayLy_amount: 0,
  week_amount: 0,
  month_amount: 0,
});

const cardStatus = computed(() => {
  return [
    { key: 1, name: `${t("未激活")}`, value: "PENDING", type: "warning" },
    { key: 2, name: `${t("活跃")}`, value: "ACTIVE", type: "success" },
    { key: 3, name: `${t("已冻结")}`, value: "INACTIVE", type: "danger" },
    // { key: 4, name: "已挂失", value: "LOST", type: "danger" },
    // { key: 5, name: "已被盗", value: "STOLEN", type: "danger" },
    { key: 6, name: `${t("已注销")}`, value: "CLOSED", type: "info" },
    { key: 7, name: `${t("创建失败")}`, value: "FAILED", type: "danger" },
  ];
});

// 卡片状态
const getCardStatusName = (status) => {
  return cardStatus.value.find((i) => status === i.value);
};

// 按钮list
const setCardBtnList = computed(() => {
  let btnList = ref([]);
  // 判断是否是线下开卡,如果是非活跃状态按钮都不展示 FAILED
  if (state.detailInfo.offline) {
    if (
      state.detailInfo.card_status === "ACTIVE" ||
      (state.detailInfo.card_status !== "CLOSED" &&
        state.detailInfo.card_status !== "PENDING" &&
        state.detailInfo.card_status !== "FAILED")
    ) {
      btnList.value = [
        {
          key: "record",
          name: `${t("账户流水")}`,
          color: "rgba(52, 152, 219, 1)",
          click: () => {
            record();
          },
        },
        {
          key: "recharge",
          name: `${t("充值")}`,
          color: "rgba(93, 109, 126, 1)",
          click: () => {
            recharge();
          },
        },
        {
          key: "withdraw",
          name: `${t("提现")}`,
          color: "rgba(93, 109, 126, 1)",
          click: () => {
            withdraw();
          },
        },
        {
          key: "signOutCard",
          name: `${t("注销卡片")}`,
          click: () => {
            signOutCard();
          },
        },
        {
          key: "frozen",
          name: `${
            state.detailInfo.card_status === "INACTIVE"
              ? t("解冻卡片")
              : t("冻结卡片")
          }`,
          click: () => {
            frozen(
              state.detailInfo.card_status === "INACTIVE"
                ? "ACTIVE"
                : "INACTIVE"
            );
          },
        },
        {
          key: "reveal",
          name: `${state.isShowCard ? t("显示卡片详情") : t("隐藏卡片详情")}`,
          click: () => {
            reveal(state.isShowCard ? true : false);
          },
        },
        {
          key: "recharge",
          name: `${t("充值")}`,
          click: () => {
            recharge();
          },
        },
        {
          key: "withdraw",
          name: `${t("提现")}`,
          click: () => {
            withdraw();
          },
        },
      ];
      // 判断是否可以充值提现
      if (state.detailInfo.allow_in == 0) {
        let index = btnList.value.findIndex((item) => item.key == "recharge");
        btnList.value.splice(index, 1);
      }
      if (state.detailInfo.allow_out == 0) {
        let index = btnList.value.findIndex((item) => item.key == "withdraw");
        btnList.value.splice(index, 1);
      }
      if (state.detailInfo.allow_limit == 0) {
        let index = btnList.value.findIndex((item) => item.key == "setLimit");
        btnList.value.splice(index, 1);
      }
    } else {
      if (state.detailInfo.card_status == "CLOSED") {
        btnList.value = [
          {
            key: "record",
            name: `${t("账户流水")}`,
            color: "rgba(52, 152, 219, 1)",
            click: () => {
              record();
            },
          },
        ];
      } else {
        btnList.value = [];
      }
    }
  } else {
    if (
      state.detailInfo.card_status === "CLOSED" ||
      state.detailInfo.card_status === "FAILED"
    ) {
      if (state.detailInfo.card_status == "CLOSED") {
        btnList.value = [
          {
            key: "record",
            name: `${t("账户流水")}`,
            color: "rgba(52, 152, 219, 1)",
            click: () => {
              record();
            },
          },
        ];
      } else {
        btnList.value = [];
      }
    } else {
      let arr = ["ACTIVE", "PENDING", "INACTIVE"];
      let arr1 = ["ACTIVE", "PENDING"];
      if (arr.includes(state.detailInfo.card_status)) {
        btnList.value = [
          {
            key: "record",
            name: `${t("账户流水")}`,
            color: "rgba(52, 152, 219, 1)",
            click: () => {
              record();
            },
          },
          {
            key: "recharge",
            name: `${t("充值")}`,
            color: "rgba(93, 109, 126, 1)",
            click: () => {
              recharge();
            },
          },
          {
            key: "withdraw",
            name: `${t("提现")}`,
            color: "rgba(93, 109, 126, 1)",
            click: () => {
              withdraw();
            },
          },
          {
            key: "signOutCard",
            name: `${t("注销卡片")}`,
            click: () => {
              signOutCard();
            },
          },
          {
            key: "frozen",
            name: `${
              state.detailInfo.card_status === "INACTIVE"
                ? t("解冻卡片")
                : t("冻结卡片")
            }`,
            click: () => {
              frozen(
                state.detailInfo.card_status === "INACTIVE"
                  ? "ACTIVE"
                  : "INACTIVE"
              );
            },
          },
          {
            key: "reveal",
            name: `${state.isShowCard ? t("显示卡片详情") : t("隐藏卡片详情")}`,
            click: () => {
              reveal(state.isShowCard ? true : false);
            },
          },
        ];
      }
      if (arr1.includes(state.detailInfo.card_status)) {
        btnList.value = [
          {
            key: "record",
            name: `${t("账户流水")}`,
            color: "rgba(52, 152, 219, 1)",
            click: () => {
              record();
            },
          },
          {
            key: "recharge",
            name: `${t("充值")}`,
            color: "rgba(93, 109, 126, 1)",
            click: () => {
              recharge();
            },
          },
          {
            key: "withdraw",
            name: `${t("提现")}`,
            color: "rgba(93, 109, 126, 1)",
            click: () => {
              withdraw();
            },
          },
          {
            key: "signOutCard",
            name: `${t("注销卡片")}`,
            click: () => {
              signOutCard();
            },
          },
          {
            key: "frozen",
            name: `${
              state.detailInfo.card_status === "INACTIVE"
                ? t("解冻卡片")
                : t("冻结卡片")
            }`,
            click: () => {
              frozen(
                state.detailInfo.card_status === "INACTIVE"
                  ? "ACTIVE"
                  : "INACTIVE"
              );
            },
          },
          {
            key: "editCard",
            name: `${t("修改卡片")}`,
            click: () => {
              editCard();
            },
          },
          {
            key: "setLimit",
            name: `${t("设置限额")}`,
            click: () => {
              setLimit();
            },
          },
          {
            key: "reveal",
            name: `${state.isShowCard ? t("显示卡片详情") : t("隐藏卡片详情")}`,
            click: () => {
              reveal(state.isShowCard ? true : false);
            },
          },
        ];
      }
      // 判断是否可以充值提现
      if (state.detailInfo.allow_in == 0) {
        let index = btnList.value.findIndex((item) => item.key == "recharge");
        btnList.value.splice(index, 1);
      }
      if (state.detailInfo.allow_out == 0) {
        let index = btnList.value.findIndex((item) => item.key == "withdraw");
        btnList.value.splice(index, 1);
      }
      if (state.detailInfo.allow_limit == 0) {
        let index = btnList.value.findIndex((item) => item.key == "setLimit");
        btnList.value.splice(index, 1);
      }
    }
  }
  return btnList.value;
});

const capitalizeFirstLetter = (str) => {
  if (str) {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
  }
};

const handleGo = () => {
  router.replace(`/card/management`);
};

// 年月星号
const maskDate = (dateString) => {
  const [month, year] = dateString.split("/"); // 替换月份和年份的每个数字为星号
  const maskedMonth = month.replace(/\d/g, "*");
  const maskedYear = year.replace(/\d/g, "*"); // 重新组合并返回带有分隔符的星号字符串
  return `${maskedMonth}/${maskedYear}`;
};

// 注销卡
const signOutCard = () => {
  ElMessageBox.confirm(
    `${t(
      "注销后的卡片将无法被替换，也无法被用于新的交易。待处理交易仍可能通过处理。此操作无法撤销!"
    )}`,
    `${t("您即将注销这张卡片!")}`,
    {
      confirmButtonText: `${t("确认注销")}`,
      cancelButtonText: `${t("取消")}`,
    }
  )
    .then(async () => {
      loading.value = true;
      const res = await setCard({
        card_id: state.detailInfo.card_id,
        card_status: "CLOSED",
      });
      if (res) {
        ElMessage({
          type: "success",
          message: state.detailInfo.offline
            ? t("您已申请注销卡片，请等待审核")
            : t("此卡已注销"),
        });
        loading.value = false;
        router.replace({
          path: "/card/management",
        });
      }
    })
    .catch((error) => {
      // 判断如果接口返回数据了，则不展示取消文案
      if (error === "cancel") {
        ElMessage({
          type: "info",
          message: `${t("取消")}`,
        });
      }
      loading.value = false;
    });
};

// 冻结
const frozen = async (type) => {
  try {
    loading.value = true;
    const res = await setCard({
      card_id: state.detailInfo.card_id,
      card_status: type,
    });
    loading.value = false;
    if (res) {
      let text = "";
      // 是否线下开卡判断
      if (state.detailInfo.offline) {
        text =
          type === "ACTIVE"
            ? t("您已申请解冻卡片，请等待审核")
            : t("您已申请冻结卡片，请等待审核");
      } else {
        text =
          type === "ACTIVE"
            ? t("您的卡片已被激活，可立即使用")
            : t("您的卡片已被冻结,已无法使用");
      }
      ElMessage({
        type: "success",
        message: text,
      });
      getCardsDetail();
    }
  } catch {
    loading.value = false;
  }
};

// 修改卡
const editCard = () => {
  router.replace({
    path: "/card/management/editCard",
    query: { card_id: route.query.card_id },
  });
};

// 设置限额
const setLimit = () => {
  // 默认不展示10000每笔
  if (
    state.limits.length === 1 &&
    state.limits[0].amount === 10000 &&
    state.limits[0].interval === "PER_TRANSACTION"
  ) {
    state.searchConditions = state.searchConditions;
  } else {
    if (state.limits.length > 0) {
      state.searchConditions = state.limits.map((item) => {
        return {
          amount: item.amount,
          interval: item.interval,
        };
      });
    }
  }
  state.limitDrawer = true;
};

// 设置限额金额改变事件
const onChange = (val, condition) => {
  const intervalList = state.searchConditions.map((item) => {
    return item.interval;
  });
  state.searchConditions.forEach((item) => {
    if (item.interval === "DAILY") {
      state.dayLy_amount = Number(item.amount);
    } else if (item.interval === "WEEKLY") {
      state.week_amount = Number(item.amount);
    } else if (item.interval === "MONTHLY") {
      state.month_amount = Number(item.amount);
    }
    //判断大于总金额
    if (item.amount > Number(state.totalAmount)) {
      item.tips = t(`金额需要小于等于${state.totalAmount}`);
    } else {
      item.tips = "";
    }
    // 周必须大于等于日，月大于等于周
    if (
      item.interval === "WEEKLY" &&
      intervalList.includes("DAILY") &&
      item.amount < Number(state.totalAmount)
    ) {
      if (Number(item.amount) < state.dayLy_amount) {
        item.tips = t("需要大于等于每日限额");
      } else {
        item.tips = "";
      }
    } else if (
      item.interval === "MONTHLY" &&
      item.amount < Number(state.totalAmount)
    ) {
      if (
        intervalList.includes("DAILY") &&
        Number(item.amount) < state.dayLy_amount
      ) {
        item.tips = t("需要大于等于每日限额");
      } else if (
        intervalList.includes("WEEKLY") &&
        item.amount < state.week_amount
      ) {
        item.tips = t("需要大于等于每周限额");
      } else {
        item.tips = "";
      }
    }
  });
};

const cardInfo = () => {
  return {
    card_number: generateMaskedString() + state.detailInfo.card_number,
    card_time: maskDate("12 / 2024"),
    cvv: "****",
  };
};

// 显示卡详情
const reveal = async (isShow) => {
  if (isShow) {
    try {
      loading.value = true;
      const data = await getCardSensitive({ card_id: route.query.card_id });
      loading.value = false;
      state.cardInfo = data;
      ElMessage.success(t("获取卡片详情成功"));
    } catch {
      loading.value = false;
    }
    state.cardInfo.card_time = `${state.cardInfo.expiry_month} / ${state.cardInfo.expiry_year}`;
    state.isShowCard = false;
  } else {
    state.cardInfo = cardInfo();
    state.isShowCard = true;
  }
};

const isShowRecharge = ref(false);
const isShowWithdraw = ref(false);

const recharge = () => {
  isShowRecharge.value = true;
  getUserInfo();
};

const withdraw = () => {
  isShowWithdraw.value = true;
  getUserInfo();
};

const isHavePassword = ref();
const getUserInfo = async () => {
  const res = await GetNewMerchantInfo();
  isHavePassword.value = res.is_set_trade_password;
};

const isShowRecord = ref(false);

const record = () => {
  isShowRecord.value = true;
};

const selectItems = computed(() => {
  return state.searchConditions.map((item) => {
    return item.interval;
  });
});

// 添加限额
const addLimit = () => {
  state.searchConditions.push({ amount: "", interval: "" });
};

// 删除限额
const removeLimit = (index) => {
  state.searchConditions.splice(index, 1);
  onChange();
};

// 设置限额保存
const saveLimit = async () => {
  const searchConditions = state.searchConditions.map((item) => {
    if (Object.keys(item).includes("amount") && item.amount !== "") {
      return item;
    }
    return undefined;
  });
  const conditions = searchConditions.filter(Boolean); // 筛选出来不为空的
  if (conditions.length === 0) {
    ElMessage({
      type: "warning",
      message: "请添加限额",
    });
  } else {
    const tips = conditions.filter((item) => {
      if (item.tips && item.tips !== "") {
        return item;
      }
    });
    // 判断是否有限额错误
    if (tips.length < 1) {
      try {
        loading.value = true;
        const res = await setCardLimits({
          card_id: route.query.card_id,
          limits: conditions,
        });
        if (res) {
          ElMessage({
            type: "success",
            message: `${t("设置成功")}`,
          });
          loading.value = false;
          state.limitDrawer = false;
          getCardsDetail();
          getCardsLimits();
        }
      } catch {}
    } else {
      nextTick(() => {
        conditions.forEach((item, index) => {
          if (item.tips !== "") {
            inputRef.value[index].focus();
          }
        });
      });
    }
  }
};

// 卡片详情
const getCardsDetail = async () => {
  try {
    loading.value = true;
    const data = (await GetCardsDetail({ card_id: route.query.card_id })) || {};
    state.detailInfo = data;
    state.cardInfo = cardInfo();
    state.totalAmount = data.total_amount || 0;
    loading.value = false;
  } catch {}
};

// 获取卡片限额
const getCardsLimits = async () => {
  try {
    const { limits } = await GetCardsLimits({ card_id: route.query.card_id });
    state.limits = limits || [];
  } catch (e) {
    console.log(e);
  }
};
// 卡片基本信息
const getCardsConfig = async () => {
  try {
    const { start_category, limits } = await GetCardsConfig();
    state.cardLimits = limits || [];
  } catch (e) {
    console.log(e);
  }
};
onMounted(async () => {
  await getCardsDetail();
  await getCardsLimits();
  await getCardsConfig();
});
</script>
<style lang="scss" scoped>
.customForm {
  .el-form-item__content {
    display: inline-block;
  }
}
.el-icon {
  vertical-align: middle;
  color: red;
}
.detailRow {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0.5rem;

  .rowName {
    min-width: 30%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .rowValue {
    word-break: break-all;
    text-align: right;
  }
}
</style>
